<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>线路</title>
		<link href="../../css/mui.min.css" type="text/css" rel="stylesheet" />
		<style type="text/css">
		.moduleTitle {padding: 10px;border-left: solid 5px palevioletred;background-color: rgba(255,255,255,.7);border-bottom-right-radius: 0px;border-top-right-radius: 0px}
		img.hotline {height: auto !important;max-width: initial !important;width: 100%;}
		p.price {position: absolute;bottom: 11px;}
		button.more{margin: 10px auto;background-color: transparent;color: palevioletred;border: solid 2px palevioletred;border-radius: 10px; padding: 4px;width: 38%;}
		div.xinluDes{position: absolute !important;opacity: 0.5 !important;background: #000 !important;color: #fff !important;height: 50px !important;font-family: '微软雅黑';font-size: 18px !important;bottom: 5px !important;line-height: 50px !important;box-shadow: 0px 0px 6px #000;http://127.0.0.1:8020/travel/img/xianlu_pic3.jpg}
		img.xinluImg{height: 200px !important;}
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: palevioletred;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {color: palevioletred;border-bottom: 2px solid #007aff; background: 0 0;}
	    img.freeImg{line-height: 100px !important;max-width: 130px !important;height: 100px !important;}
	     p.freeDes{white-space: normal !important;color: #323232;font-size: 16px;}
	     .jiage{margin-top: 8px;color: orangered;font-size: 14px;font-weight: bold;}
	     span.prices{font-size: 16px;display: inline-block;padding-left: 3px;padding-right: 3px;}
	     /*a.yuan{background-color:#35D0C9;}*/
	</style>
	<script src="../../js/mui.min.js" type="text/javascript"></script>
	<script src="../../js/jquery.min.js" type="text/javascript"></script>
	<script src="../../js/us/URL.js" type="text/javascript"></script>
	<script src="../../js/us/showPic.js" type="text/javascript"></script>
	<script src="../../js/us/showText.js" type="text/javascript"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">线路</h1>
		</header>
			<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="">
				            <div class="mui-media-body">
				               	<div  class="jiage">￥<span class="prices">100</span>元</div>
				                <p class="mui-ellipsis freeDes">好像回家呀好像回家呀好像回家呀好像回家呀好像回家呀好像回家呀好像回家呀</p>
				            	<span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="">
				            <div class="mui-media-body">
				               <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <!--<li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;" class="yuan">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                <div  class="jiage">￥<span class="prices"></span>元</div>
				                <p class="mui-ellipsis freeDes"></p>
				                <span class="test_id2" style="display: none;"></span>
				            </div>
				        </a>
				    </li>-->
				    
				</ul>
			</div>
		</div>
	</body>
</html>
		
		<script type="text/javascript">
					var webview_detail = null; //定义详情页
					var titleNView = { //详情页原生导航配置
						backgroundColor: '#f7f7f7', //导航栏背景色
						titleText: '', //导航栏标题
						titleColor: '#000000', //文字颜色
						type: 'transparent', //透明渐变样式
						autoBackButton: true, //自动绘制返回箭头
						splitLine: { //底部分割线
							color: '#cccccc'
						}
					}
					var title;
					var litpic;
					var storeprice;
					var id;
					//已存在的线路列表   s
					var data2={col:"litpic,storeprice,title,id"}//热门景点所需要的字段名
					mui.getJSON(pageUrl.xianlu,data2,function(res){
						var linshi=[];
						for(var i=0;i<res.length;i++){
							linshi.push(res[i].litpic);
						}
						var  scence=mui(".freeImg");
						//图片展示
						showPic.picList(scence,linshi);
						//标题展示
						var titleList2=mui(".freeDes");
						var linshi2=[];
						for(var i=0;i<res.length;i++){
							linshi2.push(res[i].title);
						}
						showText.textList(titleList2,linshi2);
						//价格展示
						var priceList=$(".prices");
						var id2=$(".test_id2");
						var linshi3=[];
						var linshi4=[];//存放id
						for(var i=0;i<res.length;i++){
							linshi3.push(res[i].storeprice);
							linshi4.push(res[i].id);
						}
						showText.textList(priceList,linshi3);
						showText.textList(id2,linshi4);
						
						//预加载详情页
						webview_detail = mui.preload({
							url: 'detail_test.html',
							id: 'news_detail',
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView
									 }
						});
					});
					//已存在的线路列表  e
		</script>
		<!--加载更多的下拉列表-->
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
//					down: {
//						callback: pulldownRefresh
//					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			var count = 2;//count刷新的次数，也是页数;第一页默认已经存在
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				var data={col:"litpic,storeprice,title,page"};
				mui.getJSON(pageUrl.more_xianlu+"?litpic&storeprice&title&page="+count,data,function(rest){
					var linshi=[];//存放图片
					var linshi2=[];//存放title
					var linshi3=[];//存放价格
					var linshi4=[];//存放id
					setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 4)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i=0;i<rest.length;i++) {
						linshi.push(rest[i].litpic);
						linshi2.push(rest[i].title);
						linshi3.push(rest[i].price);
						linshi4.push(rest[i].id);
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML ='<a class="yuan more" href="javascript:;">'+
				            '<img class="mui-media-object mui-pull-right freeImg" src="' + linshi[i] + '">'+
				            '<div class="mui-media-body">'+
				                 '<div  class="jiage">￥<span class="prices">'+ linshi3[i]+'</span>元</div>'
				                 
				                +'<p class="mui-ellipsis freeDes">'+linshi2[i]+'</p>'+
				                '<span class="test_id2" style="display: none;">'+linshi4[i]+'</span>'+
				            '</div>'+
				        '</a>';
						table.appendChild(li);
					}
				}, 1500);
				});
				//end
				
			}
		
		
			//打开详情页
			mui('.mui-content').on('tap', '.yuan', function() {
				var title=this.querySelector(".freeDes").innerText;
				var litpic = this.querySelector("img").getAttribute("src");
				var storeprice=this.querySelector(".prices").innerHTML;
				var id=this.querySelector(".test_id2").innerHTML;
				open_detail(title, litpic,storeprice,id);
			});
			function open_detail(title, litpic,storeprice,id) {
				//预加载详情页
				webview_detail = mui.preload({
					url: 'detail_test.html',
					id: 'news_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView
							 }
				});
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					title: title,
					litpic: litpic,
					storeprice:storeprice,
					id:id
				});
				//更改详情页原生导航条信息
				titleNView.titleText = title;
				webview_detail.setStyle({
					"titleNView": titleNView
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
					},0);
			}
		</script>
